<template>
	<view class="index">
		<!-- f1 图片及标题 -->
		<view class="top">
			<image src="../../static/img/u1105.png" mode=""></image>
			<text>普吉岛海滩哪个好？普吉岛10海滩全攻略</text>
		</view>
		
		<!-- f2 介绍文章 -->
		<view class="article">
			<text>普吉岛拥有众多海滩，西侧是大片的海域，东侧与攀牙湾形成小海湾，因此大部分美丽的海滩位于普吉岛的西侧，主要分为十个海滩。对于初到普吉岛的人来说，选海滩是一件很困惑的事情，这十个海滩什么样？在哪里？选择哪个海滩适合自己？别着急，往下看你就知道了</text>
		</view>
		
		<!-- f3 具体景点 -->
		<sAttraction v-for="item in 2"></sAttraction>
		
		<!-- f4 猜你喜欢 -->
		<view class="hobby">
			<view class="line" style="width: 700rpx;"></view>
			<text>猜你喜欢</text>
			<!-- 组件引入 -->
			<view class="slist">
		   <sList v-for="item in 2"></sList>
		 </view>
		</view>
		
	</view>
</template>

<script>
	import sAttraction from "@/components/sAttraction/sAttraction.vue"
	import sList from "@/components/sList/sList.vue"
	
	export default {
		data() {
			return {

			}
		},
		
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.index {
		display: flex;
		flex-direction: column;

	// f1 图片及标题
		.top {
			display: flex;
			flex-direction: column;

			image {
				width: 750rpx;
				height: 400rpx;
			}

			text {
				padding: 40rpx 25rpx;
				font-size: 24px;
			}
		}

		// f2 详情介绍文章
		.article {
			font-size: 14px;
			color: #797979;
			padding: 40rpx 25rpx;
			line-height: 1.5;
		}
		
		// f4 猜你喜欢 
		.hobby{
			display: flex;
			flex-direction: column;
			
			.line{
				border: 1px solid rgba(0, 0, 0, .1);
				margin: auto;
			}
			
			text{
				padding: 40rpx 25rpx 0;
			}
			
			.slist{
				display: flex;
				flex-direction: column;
				padding: 0 25rpx 40rpx;
			}
		}
	}
</style>
